<template>
	<u-popup :show="show" mode="center" round="20" :closeOnClickOverlay="false">
		<view class="box">
			<view class="title">
				{{title}}
			</view>
			<view class="content">
				{{content}}
			</view>
			<view class="btn">
				<view class="btns cancel" @click="$emit('cancel')">
					{{cancelText}}
				</view>
				<view class="btns confirm" @click="$emit('confirm')">
					{{confirmText}}
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "dangerPopup",
		props: {
			show: Boolean,
			title: String,
			content: String,
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 20rpx;

		.title {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.icon {
			display: block;
			width: 128rpx;
			height: 128rpx;
			margin: 0 auto;
			}

			.content {
				font-size: 35rpx;
				text-align: center;
				padding: 20rpx 0;
			}
			.btn{
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btns{
					flex: 1;
					text-align:center;
					padding: 10rpx 0;
					margin:0 10rpx;
					color:#ffffff;
					border-radius: 20rpx;
					overflow: hidden;
				}
				.cancel{
					color:#999999;
					border: 1rpx solid #999999;
				}
				.confirm{
					background-color:#558ff2;
					border: 1rpx solid #558ff2;
				}
			}
		}
</style>
